<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">

            <el-form-item prop="moduleName">
                <el-input v-model="searchForm.moduleName" clearable placeholder="活动名称"></el-input>
            </el-form-item>
            <el-form-item prop="moduleStatus">
              <el-select filterable clearable v-model="searchForm.moduleStatus" placeholder="活动状态">
                  <el-option label="启用" value="1" ></el-option>
                  <el-option label="禁用" value="2" ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
             <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" >创建活动</el-button>
            <!-- <el-button type="warning" @click="handleStopAll()" size="small"  icon="el-icon-video-pause" v-has="'operatingTools:activityManagement:stop'">批量停用</el-button> -->
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"   stripe v-loading="loading">
           <!-- <el-table-column prop="activityNo" label="活动编号" v-if="!hideTableColumn.includes('activityConfigId')" width="210" align="center"></el-table-column> -->
            <el-table-column prop="moduleName" label="活动名称" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column prop="subTitle" label="活动备注" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column prop="moduleImg" label="活动图片" v-if="!hideTableColumn.includes('activityTypeName')" align="center">
              <template slot-scope="scope">
                <el-image :src="scope.row.moduleImg" v-image-preview="scope.row.moduleImg" style="height: 60px;" fit="fill"></el-image>
              </template>
            </el-table-column>
             <el-table-column prop="orderSort" label="排序" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
            <el-table-column prop="moduleStatus" label="活动状态" v-if="!hideTableColumn.includes('type')" align="center" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.moduleStatus=='1'">启用</el-tag>
                <el-tag v-else type="warning">禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作"  width="150" v-if="!hideTableColumn.includes('active')" align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-shop"
                    @click="handleAddShop(scope.row)"
                  >商品管理</el-button>
                  <!-- <el-button
                    size="medium"
                    type="text"
                    :icon="scope.row.activityStatus=='1'?'el-icon-video-pause':'el-icon-video-play'"
                    @click="handleActivityStop(scope.row)"
                    v-has="'operatingTools:activityManagement:stop'"
                    v-if="scope.row.status='1'"
                  >{{scope.row.activityStatus=='1'?'禁用':'启用'}}</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.row)"
                    v-has="'operatingTools:activityManagement:edit'"
                  >修改</el-button> -->

                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog :title="dialogTitle" width="700px" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false" :close-on-click-modal="false">
      <el-form  :model="form" id="userDialog" status-icon :rules="rules" ref="form" label-position="right" >
       <el-form-item label="活动名称" prop="moduleName" label-width="125px" >
          <el-input type="text" v-model="form.moduleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动备注" prop="subTitle" label-width="125px" >
           <el-input type="text" v-model="form.subTitle" autocomplete="off"></el-input>
         </el-form-item>
        <el-form-item label="活动图片" prop="moduleImg" label-width="125px" >
          <MyUpImg :imagePreview='form.moduleImg'  imageSize="chang" @change="imageChange($event, 'moduleImg')"></MyUpImg>
        </el-form-item>

        <el-form-item label="排序" prop="orderSort" label-width="125px" >
          <el-input type="number" v-model="form.orderSort" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogTitle!='查看活动'">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleActivitySubmit('form')" size="small" :loading="btnLoading">保 存</el-button>
      </div>
      </el-dialog>
      <!-- 商品管理 -->
      <el-dialog title="商品管理" width="1000px" v-dialogDrag :visible.sync="addShopVisible" @close="addShopVisible = false" :close-on-click-modal="false">
        <el-dialog width="800px" :title="innerTitleVisible" :visible.sync="innerVisible" append-to-body v-dialogDrag >
           <div class="search">
              <el-form  :model="addShopForm" id="searchBox" status-icon :rules="addShopRules" class="demo-form-inline"  ref="addShopForm" label-position="right" >

               <el-form-item prop="goodsName">
                 <el-input v-model="searchDialogForm.goodsName" clearable placeholder="请输入商品名称"></el-input>
               </el-form-item>
               <el-form-item prop="storeName" style="margin:0 10px;">
                 <el-input v-model="searchDialogForm.storeName" clearable placeholder="请输入商家名称"></el-input>
               </el-form-item>
               <el-form-item class="clearfix">
                 <el-button type="primary" @click="handleDialogSearch()" icon="el-icon-search">查询</el-button>
               </el-form-item>
              </el-form>
           </div>

           <div class="table" ref="table">
             <el-table :data="dataListDialog" style="width: 100%;" row-key="id" border  default-expand-all stripe v-loading = "loading1">

               <el-table-column prop="name" label="商品图片" v-if="!hideTableColumn.includes('img')" width="90">
                 <template #default="scope">
                    <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
                 </template>
               </el-table-column>
               <el-table-column prop="goodsName" label="商品名称" v-if="!hideTableColumn.includes('name')"  width="120">
                 <template #default="scope">
                   <span class="ellipsis-item2" :title="scope.row.goodsName">{{scope.row.goodsName}}</span>
                 </template>
               </el-table-column>
               <el-table-column prop="storeName" label="商家门店名称" v-if="!hideTableColumn.includes('shopName')" align="center" width="200" show-overflow-tooltip></el-table-column>
               <!-- <el-table-column prop="storeTypeName" label="商家类型" v-if="!hideTableColumn.includes('shopType')" align="center" width="100"></el-table-column>
               <el-table-column prop="memberName" label="会员类型" v-if="!hideTableColumn.includes('memberType')" align="center" width="120"></el-table-column> -->
               <el-table-column prop="skuStocksList[0].originalPrice" label="原价(元)" v-if="!hideTableColumn.includes('original')"  align="center" width="120"></el-table-column>
               <el-table-column prop="skuStocksList[0].costPrice" label="供货价(元)" v-if="!hideTableColumn.includes('retail')"  align="center" width="120"></el-table-column>
               <el-table-column prop="skuStocksList[0].salePrice" label="平台售价(元)" v-if="!hideTableColumn.includes('platformFor')"  align="center" width="120"></el-table-column>

               <el-table-column prop="name" label="操作" v-if="!hideTableColumn.includes('active')" min-width="90" align="center" fixed="right">
                 <template #default="scope">
                     <el-button
                       type="text"
                       icon="el-icon-circle-check"
                       @click="handleCheckShop(scope.row)"
                     >选中</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </div>
           <div class="page" ref="page">
             <MyPagination
                :total="totalDialog"
                :page.sync="searchDialogForm.pageNum"
                :limit.sync="searchDialogForm.pageSize"
                @pagination="handleDialogList"
              />
           </div>


            <div slot="footer" class="dialog-footer" v-if="innerTitleVisible!='查看商品'">
              <el-button @click="innerVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="handleActivityAddShopSubmit('addShopForm')" size="small" :loading="btnLoading">保 存</el-button>
            </div>
        </el-dialog>
        <el-dialog width="600px" title="设置" :visible.sync="innerVisible1" append-to-body v-dialogDrag >

            <el-form  :model="coverForm" id="userDialog" status-icon :rules="coverRules" ref="coverForm" label-position="right" >
              <el-form-item label="商品封面图" prop="img" label-width="125px" >
                <MyUpImg :imagePreview='coverForm.img'  imageSize="chang" @change="imageChange1($event, 'img')"></MyUpImg>
              </el-form-item>
              <!-- <el-form-item label="所需兑换积分" prop="points" label-width="125px" >
                <el-input v-model="coverForm.points" clearable placeholder="请输入所需兑换积分"></el-input>

              </el-form-item> -->

            </el-form>

            <div slot="footer" class="dialog-footer" >
              <el-button @click="innerVisible1 = false" size="small">取 消</el-button>
              <el-button type="primary" @click="handleAddCover('coverForm')" size="small" :loading="btnLoading">保 存</el-button>
            </div>
        </el-dialog>
        <div style="margin-bottom: 15px;display: flex;">
          <el-button type="primary" @click="handleActivityAddShop()" icon="el-icon-add" size="small">添加商品</el-button>
        </div>
        <el-table :data="activityShopList" style="width: 100%;"  border  @selection-change="handleSelectionChange"  stripe v-loading="activityShopLoading">
         <el-table-column prop="name" label="商品图片" v-if="!hideTableColumn.includes('img')" width="100">
           <template #default="scope">
              <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
           </template>
         </el-table-column>
         <el-table-column prop="goodsName" label="商品名称" v-if="!hideTableColumn.includes('name')" >
           <template #default="scope">
             <span class="ellipsis-item2" :title="scope.row.goodsName">{{scope.row.goodsName}}</span>
           </template>
         </el-table-column>
         <el-table-column prop="storeName" label="商家门店名称" v-if="!hideTableColumn.includes('shopName')" align="center"  show-overflow-tooltip></el-table-column>
         <el-table-column prop="name" label="商品封面图" v-if="!hideTableColumn.includes('img')" width="130">
           <template #default="scope">
              <el-image :src="scope.row.coverImg" fit="fill" v-image-preview="scope.row.coverImg" class="img"></el-image>
           </template>
         </el-table-column>
        <!-- <el-table-column prop="needPoints" label="所需兑换积分"  align="center"></el-table-column> -->
         <el-table-column prop="name" label="操作" v-if="!hideTableColumn.includes('active')" min-width="90" align="center" fixed="right">
           <template #default="scope">
             <el-button
               type="text"
               icon="el-icon-circle-check"
               @click="handleActivityAddCover(scope.row)"
             >设置</el-button>
               <el-button
                 type="text"
                 icon="el-icon-delete-solid"
                 @click="handleActivityDeltShop(scope.row)"
               >删除</el-button>
           </template>
         </el-table-column>
        </el-table>
        </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    addGoodsModule,addRelationGoods,
    getModuleGoodsList,getModuleList,goodsQuerylist,delModuleGoods,settingCoverImg
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        loading1: false,
        btnLoading: false,
        inputLoading:false,
        createTime:[],
        sendTime:[],
        typeList:[],
        searchForm: {
          moduleName:'',
          moduleStatus:'',
          subTitle:'',
          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dialogTitle:'',
        addVisible:false,
        form:{
          moduleId:'',
          moduleName:'',
          moduleImg:'',
          orderSort:'',
        },
        time:[],
        rules: {
         moduleName: [{required: true, message: '请输入活动名称',trigger: 'blur'}],
         // orderSort: [{required: true, message: '请输入活动排序',trigger: 'blur'}],
        },
        addShopVisible:false,
        activityShopList:[],
        activityShopLoading:false,

        innerVisible:false,
        addShopForm:{
          activityConfigId:'',
          id:'',
          categoryId:'',
          categoryName:'',
          goodsSpu:''
        },
        addShopRules: {
         categoryId: [{required: true, message: '请输入商品类目ID',trigger: 'blur'}],
         categoryName: [{required: true, message: '请输入商品类目',trigger: 'blur'}],
         goodsSpu: [{required: true, message: '请输入商品spu',trigger: 'blur'}]
        },
        multipleSelection:[],
        activityConfigId:"",
        actionUrl:common.apihost+"/goods/houniaoActivityGoods/importData",
        header:{
          AuthorizationMega:''
        },
        innerTitleVisible:'',
        searchDialogForm: {
          goodsName:'',
          storeName:'',
          pageNum: 1,
          pageSize: 20,
        },
        dataListDialog:[],
        totalDialog:0,
        moduleId:'',

        innerVisible1:false,
        coverForm:{
          moduleRelationId:'',
          img:'',

        },
        coverRules: {
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.header.AuthorizationMega = localStorage.getItem('bossAppToken');
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleActivityAddCover(row){
        this.innerVisible1 = true;
        this.coverForm.moduleRelationId = row.moduleRelationId;
        this.coverForm.img = row.coverImg;
        // this.coverForm.points = row.needPoints;
      },
      handleAddCover(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let result = await settingCoverImg(this.coverForm);
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.innerVisible1 = false;
              this.activityShopListFn();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      async handleCheckShop(row){
        try {
          const result = await addRelationGoods({moduleId:this.moduleId,goodsId:row.goodsId});
          if (result.code == 200) {
            this.$message({
              message: result.msg,
              type: 'success'
            });
            this.innerVisible = false;
            this.activityShopListFn();
          } else {
            this.$message.error(result.msg);
          }
          this.loading1 = false;
        } catch (err) {
          this.loading1 = false;
          console.log(err)
        }
      },
      handleDialogSearch(){
          this.searchDialogForm.pageNum = 1;
          this.handleDialogList();
      },
      async handleDialogList() {
        try {
          this.loading1 = true;
          const result = await goodsQuerylist(this.searchDialogForm);
          if (result.code == 200) {
            this.totalDialog = result.total;
            this.dataListDialog = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading1 = false;
        } catch (err) {
          this.loading1 = false;
          console.log(err)
        }
      },
      imageChange(path, name) {
        this.form[name] = path
      },
      imageChange1(path, name) {
        this.coverForm[name] = path
      },
      handleActivityDeltShop(row){
        this.$confirm(`您确定要删除商品吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delModuleGoods({moduleRelationId:row.moduleRelationId}).then((result) => {
            if (result.code == '200') {
                 this.activityShopListFn();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      /** 单个或批量删除 **/
      handleDelt(row){
        let ids = [];
        if(row){
          ids = [row.id]
        }else{
          if(!this.multipleSelection.length){
            this.$modal.msgError("请先选中在批量删除");
            return;
          }else{
            ids = [];
            for(let i=0;i<this.multipleSelection.length;i++){
              ids.push(this.multipleSelection[i].id)
            }
          }
        }
        this.$confirm(`您确定要删除商品SPU为${ids.join(',')}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ActivityBatchDelete({goodsIds:ids.join(',')}).then((result) => {
            if (result.code == '200') {
                 this.activityShopListFn();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      handleActivityAddShopEdit(row){
        this.addShopForm = {
          activityConfigId:this.activityConfigId,
          id:row.id,
          categoryId:row.categoryId,
          categoryName:row.categoryName,
          goodsSpu:row.goodsSpu
        };
        this.innerTitleVisible = '修改商品'
        this.innerVisible = true;
      },
      handleActivityAddShopView(row){
        this.addShopForm = {
          activityConfigId:this.activityConfigId,
          id:row.id,
          categoryId:row.categoryId,
          categoryName:row.categoryName,
          goodsSpu:row.goodsSpu
        };
        this.innerTitleVisible = '查看商品'
        this.innerVisible = true;
      },
      handleAvatarSuccess(res, file) {
        if(res.code==200){
          this.activityShopListFn();
          this.$message.success(res.msg);
        }else{
          this.$message.error(res.msg)
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleActivityAddShop(){
        this.addShopForm = {
          id:'',
          activityConfigId:this.activityConfigId,
          categoryId:'',
          categoryName:'',
          goodsSpu:''
        };
         this.innerTitleVisible = '新增商品'
        this.innerVisible = true;
        this.handleDialogList();
      },
      handleActivityAddShopSubmit(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            let result;

            if(this.addShopForm.id){
              result = await updateActivityGoods(this.addShopForm);
            }else{
              result = await addActivityGoods(this.addShopForm);
            }
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.innerVisible = false;
              this.activityShopListFn();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      async activityShopListFn(){
        try {
          this.activityShopLoading = true;
           const result = await getModuleGoodsList({moduleId:this.moduleId});
            if (result.code == 200) {
              this.activityShopList = result.data;
            } else {
              this.$message.error(result.msg);
            }
             this.activityShopLoading = false;
        } catch (err) {
          this.activityShopLoading = false;
          console.log(err)
        }
      },
      resetSearch(){
        this.createTime = [];
        this.sendTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      getSelect(){
        this.getSelectList('houniao_activity_type').then((res)=>{
          this.typeList = res.data;
        })
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.createTime, 'createTimeStart', 'createTimeEnd');
          data = this.addDateRange(this.searchForm, this.sendTime, 'giveTimeStart', 'giveTimeEnd');
          this.loading = true;
          const result = await getModuleList(data);
          if (result.code == 200) {
            // this.total = result.total;
            this.dataList = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleActivityStop(row){
        this.$confirm(`您确定${row.activityStatus=='1'?'禁用':'启用'}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          houniaoActivityGoodsUpdateStatus({activityConfigId:row.activityConfigId,activityStatus:row.activityStatus=='1'?'2':'1' }).then((result) => {
            if (result.code == '200') {
                 this.dataInfo();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
                 this.addVisible = false;
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      handleAddShop(row){
        this.moduleId = row.moduleId;
        this.activityShopListFn();
        this.addShopVisible = true;

      },
      /** 新增活动类型 **/
      handleActivitySubmit(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            for(let i=0;i<this.typeList.length;i++){
              if(this.form.activityTypeId==this.typeList[i].dictCode) this.form.activityTypeName = this.typeList[i].dictLabel;
            }
            let result;
            let data = this.addDateRange(this.form, this.time, 'validityStartDate', 'validityEndDate');
            if(this.form.activityConfigId){
              result = await houniaoActivityGoodsUpdateActivity(data);
            }else{
              result = await addGoodsModule(data);
            }

            if (result.code == 200) {
              this.$message.success(result.msg);
              this.addVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;

          }
        })
      },
      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      handleView(row){
        this.$router.push({
        	path: '/operatingTools/activityManagementAdd',
        	query: {
        		type: 'view'
        	}
        });
      },
      handleAdd(){
        this.dialogTitle = '创建活动';
        this.form = {
          activityConfigId:'',
          activityName:'',
          sortOrder:'',
          activityTypeId:'',
          activityTypeName:'',
          supplierName:"",
          supplierType:"1",
          discount:'',
          activityPicture:'',
          activityUrl:'',
          validityFlag:'1'
        };
        this.addVisible = true;
      },
      handleEdit(row){
        this.dialogTitle = '修改活动';
        this.form = {
          activityConfigId:row.activityConfigId,
          activityName:row.activityName,
          sortOrder:row.sortOrder,
          activityTypeId:row.activityTypeId+'',
          activityTypeName:row.activityTypeName,
          supplierName:row.supplierName,

          discount:row.discount,
          activityPicture:row.activityPicture,
          activityUrl:row.activityUrl,
          supplierType:row.supplierType+'',
          validityFlag:row.validityFlag+'',

        };
        if(row.validityEndDate){
          this.time = [row.validityStartDate,row.validityEndDate]
        }
        this.addVisible = true;
      },
      handleView(row){
        this.dialogTitle = '查看活动';
        this.form = {
          activityConfigId:row.activityConfigId,
          activityName:row.activityName,
          sortOrder:row.sortOrder,
          activityTypeId:row.activityTypeId+'',
          activityTypeName:row.activityTypeName,
          supplierName:row.supplierName,
          discount:row.discount,
          activityPicture:row.activityPicture,
          activityUrl:row.activityUrl,
          supplierType:row.supplierType+'',
          validityFlag:row.validityFlag+'',
        };
        if(row.validityEndDate){
          this.time = [row.validityStartDate,row.validityEndDate]
        }
        this.addVisible = true;
      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
